<template>
	<div class="container"ref="container">
		<div>
			<div class="hot-city">
				<div class="title">热门城市</div>
				<ul class="hot-list">
					<li class="hot-item" @click="changCityName(item.name)" v-for="item of hotCities">{{item.name}}</li>
				</ul>
			</div>
			<div class="zimu-city">
				<div class="title">字母排序</div>
				<ul class="zimu-list">
					<li class="zimu-item" v-on:click="dingcity(key)" v-for="(val,key) in cities" :key="key">{{key}}</li>
				</ul>
			</div>
			<div class="citys">
				<div v-for="(val,key) in cities" :key="key">
					<div class="a-city">
						<div class="title" :ref="key">{{key}}</div>
					<ul class="a-list">
						<li v-for="item in val" @click="changCityName(item.name)" class="a-item">{{item.name}}</li>
					</ul>
					</div>
				</div>
			</div>
			<!-- <button id="top" style="position:fixed;right:0;bottom:20%">回到顶部</button> -->

		</div>
</div>
</template>

<script type="text/javascript">
	 // top.onclick = function(){
  //           scrollTo(0,0);
  //       }


	import BScroll from 'better-scroll';
	import { mapMutations } from 'vuex';
	export default{
		props:["hotCities","cities"],
		data(){
          return{
            scroll:''
          }
        },
        mounted(){
          //console.log(this.$refs['container']);
          const container = this.$refs['container'];
          this.scroll = new BScroll(container,{click:true});
        },
        methods:{
        	dingcity(zimuName){
        		this.scroll.scrollToElement(this.$refs[zimuName][0],1500)
        	},
        	changCityName(cityName){
        		this.$router.push("/");
        		this.changeCity(cityName);
        	},
        	 ...mapMutations(['changeCity'])
        }
       }
</script>

<style scoped>
	.container{
        position: absolute;
        left:0;
        right:0;
        bottom:0;
        top:.88rem;
        overflow: hidden;
        background-color: #f5f5f5;
    }
	.title{
		font-size: .24rem;
		padding:.2rem .3rem;
	}
	.hot-list{
		font-size: .28rem;
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}
	.hot-list:before{
		content:"";
		position: absolute;
		width:33.333%;
		height:100%;
		left:33.333%;
		border-left:1px solid #ddd;
		border-right:1px solid #ddd;
	}
	.hot-item{
		width:33.333%;
		text-align: center;
		float: left;
		line-height: .9rem;
		border-bottom: 1px solid #ddd;
		position: relative;
	}
	.title{
		font-size: .24rem;
		padding:.2rem .3rem;
	}
	.zimu-list{
		font-size: .28rem;
		background-color: #fff;
		overflow: hidden;
	}
	.zimu-item{
		width:16.66666%;
		text-align: center;
		float: left;
		line-height: .9rem;
	}

	.title{
		font-size: .24rem;
		padding:.2rem .3rem;
	}
	.a-list{
		font-size: .28rem;
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}
	.a-list:before{
		content:"";
		position: absolute;
		width:25%;
		height:100%;
		left:25%;
		border-left:1px solid #ddd;
		border-right:1px solid #ddd;
	}
	.a-list:after {
	    content: '';
	    position: absolute;
	    width: 10%;
	    left: 75%;
	    height: 100%;
	    border-left: .02rem solid #ddd;
	    border-right: 0;
	}
	.a-item{
		width:25%;
		text-align: center;
		float: left;
		line-height: .9rem;
		border-bottom: 1px solid #ddd;
		position: relative;
	}

</style>